<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useTopicPageStore } from '../../topicPageStore'
import { useDiscussDetailQuery } from '@/composables/usePostDataQuery'

const props = defineProps({
  discussList: Array,
})

const route = useRoute()
const router = useRouter()
const topicPageStore = useTopicPageStore()

const hoverId = ref(null)

const { data: discussDetailData } = useDiscussDetailQuery(hoverId)

const getPostByDiscuss = (id) => {
  if (topicPageStore.discussId) {
    if (id === topicPageStore.discussId) {
      // 如果点击的是当前选中的讨论，则返回上一级
      const path = route.path.replace(/\/discuss\/.*/, '')
      router.push(path)
      topicPageStore.setDiscussId(null)
      return
    }

    // 先移除/discuss/:discussId
    const path = route.path.replace(/\/discuss\/.*/, '')
    router.push(`${path}/discuss/${id}`)
  } else {
    // 如果有post/:id,则先移除post/:id
    const path = route.path.replace(/\/post\/.*/, '')
    router.push(`${path}/discuss/${id}`)
  }
  topicPageStore.setDiscussId(id)
}

const handleMouseOver = (id) => {
  hoverId.value = id
}

const handleMouseLeave = () => {
  hoverId.value = null
}

const tagColorList = [
  'bg-blue-100 text-blue-700',
  'bg-green-100 text-green-700',
  'bg-yellow-100 text-yellow-700',
  'bg-pink-100 text-pink-700',
  'bg-purple-100 text-purple-700',
  'bg-orange-100 text-orange-700',
  'bg-cyan-100 text-cyan-700',
  'bg-red-100 text-red-700',
  'bg-indigo-100 text-indigo-700',
  'bg-teal-100 text-teal-700',
]
function getTagColor(idx) {
  return tagColorList[idx % tagColorList.length]
}
</script>

<template>
  <div
    @click="getPostByDiscuss(item.id)"
    @mouseenter="handleMouseOver(item.id)"
    @mouseleave="handleMouseLeave"
    v-for="(item, index) in discussList"
    class="relative">
    <div
      :class="[
        topicPageStore.discussId === item.id ? 'bg-[#16437C] text-white' : getTagColor(index),
        'px-3 py-2 rounded-full h-fit cursor-pointer text-sm transition-colors duration-300'
      ]"
      class="relative">
      #{{ item.title }}
    </div>
    <div
      v-if="hoverId === item.id"
      class="absolute top-[-160px] left-[50%] translate-x-[-50%] w-[300px] h-[150px] bg-[--fill-0] rounded-lg shadow-lg p-3 flex flex-col gap-2 justify-between">
      <div>
        <div class="flex justify-between">
          <div class="text-lg font-bold"># {{ discussDetailData?.result.title }}</div>
          <div class="flex items-center gap-2">
            <div class="border border-gray-300 rounded-md px-2 py-[2px] text-xs">创建者</div>
            <div>
              {{ discussDetailData?.result.userInfo.username }}
            </div>
            <img :src="discussDetailData?.result.userInfo.avatar" alt="" class="w-6 h-6 rounded-full" />
          </div>
        </div>
        <div class="mt-2">描述：{{ discussDetailData?.result.introduce }}</div>
      </div>

      <div class="flex text-sm text-gray-500 gap-3">
        <div>{{ discussDetailData?.result.postCount }}篇内容</div>
        <div>{{ discussDetailData?.result.readCount }}次浏览</div>
      </div>
    </div>
  </div>
</template>
